<template>
  <div id="configureTagList">
    <h1 class="con-right-title">
      标签分类
    </h1>
    <div class="bottom-box">
      <!--table-->
      <div class="table">
        <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
        <!-- 操作按钮部分 -->
        <div class="table-conBtn">
          <el-button
            v-permission="'wh:system:configureTag:add'"
            type="warning"
            icon="el-icon-plus"
            @click="handelPage('')"
          >
            添加分类
          </el-button>
          <freshCom @searchList="searchList"></freshCom>
        </div>
        <!-- 表格部分 -->
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          @selection-change="selectChange"
          max-height="490"
          ref="table"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column type="index" width="60" label="序号">
            <template slot-scope="scope">
              {{
                scope.$index
                  | filterPage(searchParams.pageNum, searchParams.pageSize)
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            min-width="90"
            label="分类ID"
          ></el-table-column>
          <el-table-column
            prop="labelCategoryName"
            min-width="180"
            label="分类名称"
          ></el-table-column>
          <el-table-column
            prop="labelCategoryProperty"
            min-width="180"
            label="分类属性"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.labelCategoryProperty"
                :class="
                  scope.row.labelCategoryProperty | filterClass('labelPrope')
                "
                >{{
                  scope.row.labelCategoryProperty | filterName('labelPrope')
                }}</span
              >
              <span v-else>-</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            min-width="160"
          ></el-table-column>
          <el-table-column
            :label="'分类集\n启用标签数/所有标签数'"
            prop="tagCount"
            min-width="180"
          >
            <template slot-scope="scope">
              <span @click="handelDetil(scope.row)" class="detail-content"
                >{{ scope.row.enabledTagCount }}/{{ scope.row.tagCount }}</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="enabled" width="120" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.enabled === true">启用</span>
              <span v-if="scope.row.enabled === false">停用</span>
            </template>
          </el-table-column>
          <el-table-column
            label="创建者"
            prop="createUser.userName"
            min-width="100"
          >
          </el-table-column>
          <el-table-column
            prop="createdDate"
            min-width="160"
            label="创建时间"
          ></el-table-column>
          <el-table-column fixed="right" label="操作" min-width="180">
            <template slot-scope="scope">
              <el-button
                v-permission="'wh:system:configureTag:edit'"
                type="text"
                @click="handelPage(scope.row.id, scope.row.tagCount)"
              >
                编辑
              </el-button>
              <el-button
                v-permission="'wh:system:configureTag:remove'"
                type="text"
                @click="remove(scope.row)"
              >
                删除
              </el-button>
              <el-button
                v-permission="'wh:system:configureTag:aggre'"
                type="text"
                @click="handelPolyCollection(scope.row)"
              >
                聚合标签集
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
        <!--添加弹窗 -->
        <addEditDialog
          v-if="dialogData.isShow"
          :dialog-data="dialogData"
          :nameLength="nameLength"
          @refresh="refresh"
        ></addEditDialog>
        <dialogTags
          v-if="tagdialogData.isShow"
          :tagdialogData="tagdialogData"
          @refresh="refresh"
        ></dialogTags>
      </div>
    </div>
  </div>
</template>
<script>
import { getConTagsList, delLable } from '@/api/contentTags/configureTag' // 接口
import { getKeyValue } from '@/api/system/parameter' // 接口
import topSearch from '@component/contentTags/configureTag/topSearch' // 上部搜索条件
import addEditDialog from '@component/contentTags/configureTag/addEditDialog' // 添加弹窗
import dialogTags from '@component/contentTags/configureTag/dialogTags' // 所有标签弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'clasfiy',
  msg: '标签分类',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    addEditDialog,
    dialogTags
  },
  data() {
    return {
      loading: false,
      total: 10,
      pageName: 'configureTag',
      tableData: [], // table内容
      nameLength: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        labelCategoryProperty: '', // 分类属性
        enabled: '', // 分类状态
        labelCategoryName: '' // 分类名称
      },
      dialogData: {
        isShow: false, // 默认隐藏
        id: '', // 默认新增
        params: '',
        labelCategory: '' // 分类属性
      },
      tagdialogData: {
        isShow: false, // 默认隐藏
        params: {}
      },
      // 选中行的数据
      selectData: [],
      powerStr: 'system:configureTag:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.getTagNameLength()
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        } else {
          this.canShowPage = true
          this.getTagNameLength()
        }
      })
    },

    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getConTagsList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.msg,
            type: 'warning'
          })
        }
      )
    },
    /*获取标签名称长度*/
    getTagNameLength() {
      let obj = {
        configKey: 'content_label_category_count'
      }
      getKeyValue(
        obj,
        (response) => {
          this.nameLength = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 选择框改变事件
    selectChange(value) {
      this.selectData = value
      this.isDisabled = !(this.selectData.length > 0)
    },

    // 当前页码改变事件
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    // 添加标签
    handelPage(id = '', tagCount) {
      this.dialogData.isShow = true
      this.dialogData.id = id
      this.dialogData.labelCategory = this.formInline.labelCategoryProperty
      this.dialogData.params = tagCount
    },
    // 聚合标签集
    handelPolyCollection(row) {
      let id = row.id
      let query = {
        labelPrope: row.labelCategoryProperty,
        labelCategory: row.labelCategoryName,
        id
      }
      this.$router.push({
        name: 'wh:set:tags',
        query: query
      }) // 只能用 name
    },
    // 删除标签
    remove(row) {
      if (row.tagCount) {
        this.$alert('分类下包含标签,请先删除分类下标签', '系统提示', {
          confirmButtonText: '知道了'
        }).catch(() => {})
      } else {
        this.$confirm('确定删除分类吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            delLable(
              row.id,
              (response) => {
                this.searchList()
              },
              (response) => {
                this.$message({
                  message: response.message,
                  type: 'warning'
                })
              }
            )
          })
          .catch(() => {})
      }
    },
    /* 刷新列表 */
    refresh() {
      this.searchList()
    },
    // 所有标签数
    handelDetil(row) {
      this.tagdialogData.isShow = true
      this.tagdialogData.params = {
        id: row.id,
        enabledTagCount: row.enabledTagCount,
        tagCount: row.tagCount
      }
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#configureTagList {
  :deep(.el-table .cell) {
    white-space: pre-line;
    text-align: center;
  }
  .detail-content {
    cursor: pointer;
    color: #009dd9;
  }
}
</style>
